<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta content="noindex" name="robots" />
  <meta content="origin" name="referrer" />
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  <title>${pageTitle}</title>
  <style>
    body {
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }

    #splash {
      color: #333;
      display: flex;
      flex-direction: column;
      font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
      height: 100vh;
      justify-content: center;
      text-align: center;
    }

  </style>

  <script src="${es6PromiseJsUrl}"></script>
  <script src="${fetchJsUrl}"></script>
  <script src="${reactJsUrl}"></script>
  <script src="${reactDomJsUrl}"></script>

  <link href="${graphiqlCssUrl}" rel="stylesheet" />
  <link href="${pageFavicon}" rel="icon" type="image/x-icon">
  <script src="${graphiqlJsUrl}"></script>
  <script src="${subscriptionsTransportWsBrowserClientUrl}"></script>
  <script src="${graphiqlSubscriptionsFetcherBrowserClientUrl}"></script>
</head>
<body>
<div id="splash">
  Loading&hellip;
</div>
<script>
  var editorThemeCss = '${editorThemeCss}'
  if (editorThemeCss !== '') {
    var link = document.createElement("link")
    link.href = editorThemeCss
    link.type = "text/css"
    link.rel = "stylesheet"
    link.media = "screen,print"

    document.getElementsByTagName("head")[0].appendChild(link)
  }

  // Parse the search string to get url parameters.
  var search = window.location.search
  var parameters = {}
  search.substr(1).split('&').forEach(function(entry) {
    var eq = entry.indexOf('=')
    if (eq >= 0) {
      parameters[decodeURIComponent(entry.slice(0, eq))] =
          decodeURIComponent(entry.slice(eq + 1))
    }
  })

  // if variables was provided, try to format it.
  if (parameters.variables) {
    try {
      parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2)
    } catch (e) {
      // Do nothing, we want to display the invalid JSON as a string, rather
      // than present an error.
    }
  }

  // When the query and variables string is edited, update the URL bar so
  // that it can be easily shared
  function onEditQuery(newQuery) {
    parameters.query = newQuery
    updateURL()
  }

  function onEditVariables(newVariables) {
    parameters.variables = newVariables
    updateURL()
  }

  function onEditOperationName(newOperationName) {
    parameters.operationName = newOperationName
    updateURL()
  }

  function updateURL() {
    var newSearch = '?' + Object.keys(parameters).filter(function(key) {
      return Boolean(parameters[key])
    }).map(function(key) {
      return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key])
    }).join('&')
    history.replaceState(null, null, newSearch)
  }

  var headers = ${headers}

      function addRequiredHeadersIfAbsent() {
        if (!headers['Accept']) {
          headers['Accept'] = 'application/json'
        }
        if (!headers['Content-Type']) {
          headers['Content-Type'] = 'application/json'
        }
      }

  function onEditHeaders(newHeaders) {
    try {
      headers = JSON.parse(newHeaders)
    } catch (e) {
      headers = {}
    }
    addRequiredHeadersIfAbsent()
  }

  // Defines a GraphQL fetcher using the fetch API. You're not required to
  // use fetch, and could instead implement graphQLFetcher however you like,
  // as long as it returns a Promise or Observable.
  function graphQLFetcher(graphQLParams) {
    // This example expects a GraphQL server at the path /graphql.
    // Change this to point wherever you host your GraphQL server.
    return fetch('${graphqlEndpoint}', {
      method: 'post',
      headers: headers,
      body: JSON.stringify(graphQLParams),
      credentials: 'include'
    }).then(function(response) {
      return response.text()
    }).then(function(responseBody) {
      try {
        return JSON.parse(responseBody)
      } catch (error) {
        return responseBody
      }
    })
  }

  var loc = window.location, newUri

  if (loc.protocol === "https:") {
    newUri = "wss:"
  } else {
    newUri = "ws:"
  }
  newUri += "//" + loc.host
  newUri += "${subscriptionsEndpoint}"

  var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(newUri, {
    reconnect: ${subscriptionClientReconnect},
    timeout: ${subscriptionClientTimeout}
  })
  var subscriptionsFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient,
      graphQLFetcher)

  var props = ${props}
  if (parameters.query) {
    props.query = parameters.query
  }
  if (parameters.variables) {
    props.variables = parameters.variables
  }
  if (parameters.operationName) {
    props.operationName = parameters.operationName
  }
  props.fetcher = subscriptionsFetcher
  props.onEditQuery = onEditQuery
  props.onEditVariables = onEditVariables
  props.onEditOperationName = onEditOperationName
  props.onEditHeaders = onEditHeaders
  props.headers = props.headers || '{}'
  if (headers) {
    var newHeaders = Object.assign({}, JSON.parse(props.headers), headers)
    props.headers = JSON.stringify(newHeaders, undefined, 2)
  }
  onEditHeaders(props.headers)

  // Render <GraphiQL /> into the body.
  ReactDOM.render(
      React.createElement(GraphiQL, props),
      document.body
  )

</script>
</body>
</html>
